<!doctype html>
<html lang="en"xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">
    <title>Tiny Dashboard - A Bootstrap Dashboard Template</title>
    <!-- Simple bar CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/simplebar.css}">
    <!-- Fonts CSS -->
    <!--    <link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">-->
    <!-- Icons CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/feather.css}">
    <link rel="stylesheet" th:href="@{/dash/css/dataTables.bootstrap4.css}">
    <!-- Date Range Picker CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/daterangepicker.css}">
    <!-- App CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/app-light.css}" id="lightTheme">
    <link rel="stylesheet" th:href="@{/dash/css/app-dark.css}" id="darkTheme" disabled>
  </head>

  <body class="vertical  light  ">
    <div class="wrapper">
      <nav th:replace="~{comm/blank::topnav}"/>
      <aside th:replace="~{comm/blank::aside}"/>
      <main role="main" class="main-content">
        <div class="container-fluid">
          <div class="row justify-content-center">
            <div class="col-12">
<!--              <h2 class="mb-2 page-title">Data table</h2>-->
<!--              <p class="card-text">DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table. </p>-->

              <div class="row align-items-center my-4">
                <div class="col">
                  <h2 class="h3 mb-0 page-title">订单一览</h2>
                </div>
                <div class="col-auto">
                  <a onclick="getDelIndents()" type="button" class="btn btn-danger text-light"><span class="fe fe-trash fe-12 mr-2"></span>批量删除</a>
                  <a href="/indent/toAdd" type="button" class="btn btn-primary"><span class="fe fe-filter fe-12 mr-2"></span>创建订单</a>
                </div>
              </div>

              <div class="row my-4">
                <!-- Small table -->
                <div class="col-md-12">
                  <div class="card shadow">
                    <div class="card-body">
                      <!-- table -->
                      <table class="table datatables" id="dataTable-1">
                        <thead>
                          <tr>
                            <th></th>
                            <th>ID</th>
                            <th>用户ID</th>
                            <th>购买者名称</th>
                            <th>电话号码</th>
                            <th>创建时间</th>
                            <th>物流</th>
                            <th>总计</th>
                            <th>付款</th>
                            <th>状态</th>
                            <th>操作</th>
                          </tr>
                        </thead>
                        <tbody>
                          <th:block th:if="${indents!=null}" th:each="indent:${indents}">
                          <tr>
                            <td>
                              <div class="custom-control custom-checkbox">
                                <input name="sel" type="checkbox" class="custom-control-input" th:id="${indent.indentId}">
                                <label class="custom-control-label" th:for="${indent.indentId}"></label>
                              </div>
                            </td>
                            <td th:text="${indent.indentId}">1227</td>
                            <td th:text="${indent.userId}">2021-01-22 13:28:00</td>
                            <td th:text="${indent.buyerName}">Timon Bauer</td>
                            <td th:text="${indent.phone}">(690) 965-1551</td>
                            <td th:text="${#temporals.format(indent.createTime,'yyyy-MM-dd HH:mm:ss')}">840-2188 Placerat, Rd.</td>
                            <td th:text="${indent.shippingName}">$3.46</td>
                            <td th:text="${indent.payment}"> Paypal</td>
                            <td th:text="${indent.paymentType==1?'在线支付':'货到付款'}"> Paypal</td>
                            <td><span class="dot dot-lg mr-2" th:classappend="${indent.status>=6 or indent.status<=0?
                    'bg-warning':(indent.status==4?'bg-success':(indent.status>0 and indent.status<6?'bg-primary':''))}"></span></td>
                            <td><button class="btn btn-sm dropdown-toggle more-horizontal" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                              <span class="text-muted sr-only">Action</span>
                            </button>
                              <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" th:href="@{/indent/detail(indentId=${indent.indentId})}">Edit</a>
                                <a class="dropdown-item" th:href="@{/indent/del(indentId=${indent.indentId})}">Remove</a>
                                <a class="dropdown-item" href="#">Assign</a>
                              </div>
                            </td>
                          </tr>
                          </th:block>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div> <!-- simple table -->
              </div> <!-- end section -->
            </div> <!-- .col-12 -->
          </div> <!-- .row -->
        </div> <!-- .container-fluid -->
        <div th:replace="~{comm/blank::modal1}"/>
        <div th:replace="~{comm/blank::modal2}"/>
      </main> <!-- main -->
    </div> <!-- .wrapper -->
    <script th:src="@{/dash/js/jquery.min.js}"></script>
    <script th:src="@{/dash/js/popper.min.js}"></script>
    <script th:src="@{/dash/js/moment.min.js}"></script>
    <script th:src="@{/dash/js/bootstrap.min.js}"></script>
    <script th:src="@{/dash/js/simplebar.min.js}"></script>
    <script th:src="@{/dash/js/daterangepicker.js}"></script>
    <script th:src="@{/dash/js/jquery.stickOnScroll.js}"></script>
    <script th:src="@{/dash/js/tinycolor-min.js}"></script>
    <script th:src="@{/dash/js/config.js}"></script>
    <script th:src="@{/dash/js/apps.js}"></script>
    <script th:src='@{/dash/js/jquery.dataTables.min.js}'></script>
    <script th:src='@{/dash/js/dataTables.bootstrap4.min.js}'></script>
    <script>
      $('#dataTable-1').DataTable(
      {
        autoWidth: true,
        "lengthMenu": [
          [16, 32, 64, -1],
          [16, 32, 64, "All"]
        ]
      });
    </script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
<!--    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-56159088-1"></script>-->
    <script>

      function getDelIndents(){
        const indents = []
        console.log($("input:checkbox[name='sel']:checked"))
        $("input:checkbox[name='sel']:checked").each(function (index) {
            indents[index] = $(this).attr('id')
        })
        console.log(indents.toLocaleString())
          if (indents.toLocaleString() == '') {
              alert('请先选择！')
              return false
          }
        $.post('/indent/delete/'+indents.toLocaleString(),function(data,status){
          // alert("Data: " + data + "nStatus: " + status);
          alert("Status: " + status);
          window.location.href = '/indent/list'
        });


      }

      window.dataLayer = window.dataLayer || [];

      function gtag()
      {
        dataLayer.push(arguments);
      }
      gtag('js', new Date());
      gtag('config', 'UA-56159088-1');
    </script>
  </body>
</html>
